import { LanguageTypeString, QuestionType } from '@/components/question/typing';
import useQuestionnaireStore from '@/store/questionnaire';
import { Checkbox, Modal, Select, Table } from 'ant-design-vue';
import { defineComponent, PropType, ref } from 'vue';

export default defineComponent({
  props: {
    question: Object as PropType<QuestionType>,
    language: String as PropType<LanguageTypeString>,
    open: Boolean,
    width: [String, Number] as PropType<string | number>,
  },
  emits: ['update:open'],
  setup(props, { emit }) {
    const { open, width, question, language } = props;
    const showModal = ref(open || false);
    const questionnaireStore = useQuestionnaireStore();
    const questionnaire = questionnaireStore.getQuestionnaire;
    const questionProper =
      language === 'zh' ? question?.questionProperZh : question?.questionProperEn;
    const optionJump = ref(false);
    const unconditionJump = ref(false);
    const jumpToQuestionList = ref<Array<any>>([]);

    questionnaire.questions?.forEach(eachQuestion => {
      if (eachQuestion.type !== 'paging' && eachQuestion!.number! > question!.number!) {
        jumpToQuestionList.value.push({
          label: `跳转到 第${eachQuestion.number}题`,
          value: eachQuestion.number,
        });
      }
    });
    jumpToQuestionList.value.unshift({
      label: '不跳转, 按顺序填写下一题',
      value: 0,
    });

    const optionJumpColumns = ref<Array<any>>([
      {
        title: '选项',
        dataIndex: 'optionTitle',
        key: 'optionTitle',
        width: 300,
      },
      {
        title: '跳转到',
        dataIndex: 'jumpTo',
        key: 'jumpTo',
        value: 0,
        customRender: (paramObj: any) => {
          return (
            <Select
              style="width:100%"
              options={jumpToQuestionList.value}
              v-model:value={paramObj.record.jumpToQuestionNumber}
            ></Select>
          );
        },
      },
    ]);

    const optionJumpDataSource = ref<Array<any>>([]);
    questionProper?.items?.forEach(eachItem => {
      optionJumpDataSource.value.push({
        optionId: eachItem.id,
        optionTitle: eachItem.title,
        optionValue: eachItem.value,
        jumpToQuestionNumber: 0,
      });
    });

    const onCancel = () => {
      closeModal();
    };

    const onOk = () => {
      closeModal();
    };

    const closeModal = () => {
      showModal.value = false;
      emit('update:open', showModal.value);
    };

    return () => {
      return (
        <Modal
          v-model:open={showModal.value}
          width={width}
          onCancel={onCancel}
          onOk={onOk}
          title="跳题逻辑设置"
        >
          <Checkbox v-model:checked={optionJump.value} style="margin-bottom:16px;margin-top:16px">
            按选项跳题
          </Checkbox>
          <Table
            columns={optionJumpColumns.value}
            dataSource={optionJumpDataSource.value}
            pagination={false}
            bordered
          />
          <Checkbox
            v-model:checked={unconditionJump.value}
            style="margin-bottom:16px;margin-top:16px"
          >
            无条件跳题
          </Checkbox>
        </Modal>
      );
    };
  },
});
